<template>
	<view class="content">
		<view class="header">
			<view class="header-logo">
				<image src="../../static/index/heade-logo-tuya.png" mode=""></image>
			</view>
			<view class="logo">
				<image src="../../static/index/logo-tuya.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<view class="headers">
				<view class="logo">
					<image src="../../static/shop/Store@2x-tuya.png" mode=""></image>
				</view>
				<view class="myCart" @click="goCart()">
					<image src="../../static/shop/购物车@2x-tuya.png" mode=""></image>
					<text>我的购物车</text>
				</view>
			</view>
			
			<!-- 瀑布流面板 -->
			<view class="list">
				<view class="tab">
					<nut-tabs v-model="data.tabIndex" @click="changeTab">
						<nut-tab-pane v-for="(item, index) in data.type" :key="index" :title="item.category_name" :pane-key="item.category_id">
							<view class="waterfall">
								<!-- 左边瀑布 -->
								<view class="wt-left wt-list">
									<view class="wt-item" v-for="(good,index) in LeftList" :key="index" @click="shopdetail(good.id)">
										<view class="item-img">
											<image :src="good.cover_img" mode='widthFix'></image>
										</view>
										<!-- 介绍部分 -->
										<view class="introduce-section">
											<text class="title">{{good.name}}</text>
											<view class="tags-box">
												<text>¥{{good.price}}</text>
											</view>
										</view>
									</view>
								</view>
								<!-- 右边瀑布 -->
								<view class="vt-right wt-list">
									<view class="wt-item" v-for="(good,index) in RightList" :key="index" @click="shopdetail(good.id)">
										<view class="item-img">
											<image :src="good.cover_img" mode='widthFix'></image>
										</view>
										<!-- 介绍部分 -->
										<view class="introduce-section">
											<text class="title">{{good.name}}</text>
											<view class="tags-box">
												<text>¥{{good.price}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</nut-tab-pane>
					</nut-tabs>
				</view>
			</view>
			
			<!-- 侧栏 -->
			<nut-popup position="right" v-model:visible="show" :style="{ width, height }">
				<view class="popup-wrap">
					<view class="popup-title">
						<view class="title">价格(元)</view>
						<view class="range">
							<nut-range v-model="data.pages.price" hidden-range @change="onChange"></nut-range>
						</view>
					</view>
					<view class="popup-title" style="margin-top: 50rpx;">
						<view class="title" style="margin-bottom: 0rpx;">分类</view>
						<view class="button">
							<nut-button 
								v-for="(item, index) in data.sideType" 
								:key="index"
								:color="data.filterIndex == item.category_id? '#000000' : ''"
								@click="changeType(item.category_id)">
								{{item.category_name}}
							</nut-button>
						</view>
					</view>
					<view class="popup-button">
						<view class="button-item line" @click="popReset()">重置</view>
						<view class="button-item" @click="popSure()">确定</view>
					</view>
				</view>
			</nut-popup>
		</view>
		<TabBar :current="2"></TabBar>
	</view>
</template>

<script setup>
import TabBar from '@/components/TabBar.vue';
import { ref, reactive, onMounted } from 'vue';
import { goodsList, goodsType } from '@/request/api/shop.js';

const show = ref(false);
const width = ref('80%');
const height = ref('100%');
// const rangevalue = ref(0);

// 左侧数据列表
var LeftList = ref([])
// 右侧数据列表
var RightList = ref([])

const data = reactive({
	bannerData: [
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	],
	tabIndex: 1,
	filterIndex: 1,
	type: [],  // 类型
	sideType: [],  // 侧栏类别
	list: [],  // 列表
	popupIndex: 0,
	pages: {
		page: 1,
		limit: 10,
		category_id: 1,
		// price: 100
	}
})

onMounted(() => {
	getShopType();
	getShopList();
})

// 商品类别
const getShopType = async () => {
	try {
		const resultData = await goodsType();
		data.sideType = resultData.data;
		data.type = [...resultData.data, { category_id: 999, category_name: '筛选' }];
	} catch (e) { }
}

// 商品列表
const getShopList = async () => {
	try {
		const resultData = await goodsList(data.pages);
		data.list = resultData.data.list;
		// 将商品信息列表分为左侧右侧两个部分
		for (let i = 0; i < data.list.length; i++) {
			if (i % 2 === 0) {
				LeftList.value.push(data.list[i])
			} else {
				RightList.value.push(data.list[i])
			}
		}
	} catch (e) { }
}

// 分类tab
const changeTab = (e) => {
	if (e.paneKey == 999) {
		show.value = true;
		setTimeout(() => {
			data.tabIndex = 1;
		}, 100);
	} else {
		data.pages.page = 1;
		data.pages.category_id = e.paneKey;
		LeftList.value = [];
		RightList.value = [];
		getShopList();
	}
}

// 前往购物车
const goCart = () => {
	uni.navigateTo({
		url: '/pages/index/cart'
	})
}

// 价格进度
const onChange = (value) => {
	console.log(value);
}

// 筛选tab
const changeType = (e) => {
	data.filterIndex = e;
}

// 重置筛选
const popReset = () => {
	data.pages.page = 1;
	data.tabIndex = 1;
	data.pages.category_id = 1;
	data.pages.price = 99999;
	LeftList.value = [];
	RightList.value = [];
	getShopList();
	show.value = false;
}

// 确定筛选搜索
const popSure = () => {
	data.pages.page = 1;
	data.pages.category_id = data.filterIndex;
	data.tabIndex = data.filterIndex;
	LeftList.value = [];
	RightList.value = [];
	getShopList();
	show.value = false;
}

// 商品详情
const shopdetail = (id) => {
	uni.navigateTo({
		url: `/pages/shop/shopdetail?id=${id}`
	})
}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			.header-logo > image {
				width: 100%;
				height: 330rpx;
			}
			.logo >image {
				width: 226rpx;
				height: 34rpx;
				position: absolute;
				top: 100rpx;
				left: 20rpx;
			}
		}
		.main {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			border-radius: 70rpx 70rpx 0rpx 0rpx;
			position: absolute;
			top: 200rpx;
			padding-top: 52rpx;
			padding-bottom: 200rpx;
			.main-item {
				padding-right: 30rpx;
				margin-top: 20rpx;
				.title {
					width: 562rpx;
				}
				.banner >image{
					width: 100%;
				}
			}
			.headers {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 38rpx;
				.logo >image {
					width: 172rpx;
					height: 52rpx;
				}
				.myCart {
					display: flex;
					align-items: center;
					image {
						width: 58rpx;
						height: 42rpx;
					}
					text {
						padding-left: 12rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1C1919;
						line-height: 40rpx;
					}
				}
			}
			.list {
				box-sizing: border-box;
				::v-deep .waterfalls-flow  {
					padding: 30rpx 54rpx !important;
				}
				.tab {
					background-color: #FFFFFF;
				}
				.tab ::v-deep .nut-tabs__titles {
					background-color: #FFFFFF !important;
				}
				.item {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #211F1F;
					.desc {
						font-weight: 600;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
	.popup-wrap {
		width: 520rpx;
		height: 100vh;
		padding: 40rpx 40rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		padding-top: 160rpx;
		position: relative;
		.popup-title {
			padding-bottom: 22rpx;
			.title {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #211F1F;
				line-height: 40rpx;
				margin-bottom: 60rpx;
			}
			.range {
				margin-top: 22rpx;
			}
			.button {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		.popup-button {
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			border-top: 1rpx solid #DDD8D3;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			.button-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 100rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #211F1F;
				line-height: 40rpx;
			}
			.line {
				border-right: 1rpx solid #DDD8D3;
			}
		}
	}
	
	// 瀑布流
	.waterfall {
		display: flex;
		flex-direction: row;
		width: 740rpx;
		justify-content: center;
		overflow: hidden;
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}


	.wt-list {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 26rpx;
	}
	.wt-list:last-child {
		margin-right: 0rpx;
	}

	.wt-item {
		margin-bottom: 15rpx;
		background-color: #ffffff;
	}

	.item-img image {
		width: 100%;
		border-radius: 80rpx;
	}

	/* 商品介绍 */
	.introduce-section {
		background: #ffffff;
		padding: 20rpx 30rpx;
	}

	.introduce-section .title {
		display: inline-block;
		font-size: 32rpx;
		color: #303133;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #211F1F;
		line-height: 60rpx;
		width: 300rpx;
		height: 40rpx;
		overflow: hidden;//溢出隐藏
		text-overflow: ellipsis;//超出省略号显示
		white-space: nowrap;//文字不换行
	}

	.introduce-section .tags-box {
		font-size: 24rpx;
		color: #909399;
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #211F1F;
	}
</style>
